import { SCREEN_WIDTH, SCREEN_HEIGHT } from '../render'

export default class ConfirmDialog {
  constructor() {
    this.isVisible = false
    this.moveInfo = null
    
    // 对话框尺寸
    this.width = 320
    this.height = 240
    
    // 对话框位置 - 居中显示
    this.x = (SCREEN_WIDTH - this.width) / 2
    this.y = (SCREEN_HEIGHT - this.height) / 2
    
    // 按钮区域
    this.confirmButton = {
      x: this.x + 40,
      y: this.y + 160,
      width: 100,
      height: 50
    }
    
    this.cancelButton = {
      x: this.x + 180,
      y: this.y + 160,
      width: 100,
      height: 50
    }
  }

  show(x, y, player) {
    this.isVisible = true
    this.moveInfo = { row: y, col: x, player: player }
  }

  hide() {
    this.isVisible = false
    this.moveInfo = null
  }

  render(ctx) {
    if (!this.isVisible) return
    
    // 绘制半透明背景
    ctx.fillStyle = 'rgba(0, 0, 0, 0.7)'
    ctx.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT)
    
    // 绘制对话框背景
    this.drawDialogBackground(ctx)
    
    // 绘制对话框内容
    this.drawDialogContent(ctx)
    
    // 绘制按钮
    this.drawButtons(ctx)
  }

  drawDialogBackground(ctx) {
    // 绘制对话框阴影
    ctx.fillStyle = 'rgba(0, 0, 0, 0.4)'
    ctx.fillRect(this.x + 8, this.y + 8, this.width, this.height)
    
    // 绘制对话框背景渐变
    const gradient = ctx.createLinearGradient(this.x, this.y, this.x, this.y + this.height)
    gradient.addColorStop(0, 'rgba(255, 255, 255, 0.95)')
    gradient.addColorStop(1, 'rgba(245, 245, 245, 0.95)')
    ctx.fillStyle = gradient
    
    // 绘制圆角矩形
    this.drawRoundedRect(ctx, this.x, this.y, this.width, this.height, 16)
    
    // 绘制边框
    ctx.strokeStyle = 'rgba(102, 126, 234, 0.3)'
    ctx.lineWidth = 2
    this.drawRoundedRect(ctx, this.x, this.y, this.width, this.height, 16)
    ctx.stroke()
  }

  drawRoundedRect(ctx, x, y, width, height, radius) {
    ctx.beginPath()
    ctx.moveTo(x + radius, y)
    ctx.lineTo(x + width - radius, y)
    ctx.quadraticCurveTo(x + width, y, x + width, y + radius)
    ctx.lineTo(x + width, y + height - radius)
    ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height)
    ctx.lineTo(x + radius, y + height)
    ctx.quadraticCurveTo(x, y + height, x, y + height - radius)
    ctx.lineTo(x, y + radius)
    ctx.quadraticCurveTo(x, y, x + radius, y)
    ctx.closePath()
    ctx.fill()
  }

  drawDialogContent(ctx) {
    // 绘制标题
    ctx.fillStyle = '#333'
    ctx.font = 'bold 24px Arial'
    ctx.textAlign = 'center'
    ctx.fillText('确认落子', this.x + this.width / 2, this.y + 50)
    
    // 绘制分割线
    ctx.strokeStyle = '#e0e0e0'
    ctx.lineWidth = 1
    ctx.beginPath()
    ctx.moveTo(this.x + 20, this.y + 70)
    ctx.lineTo(this.x + this.width - 20, this.y + 70)
    ctx.stroke()
    
    // 绘制落子信息
    ctx.font = '16px Arial'
    ctx.fillStyle = '#666'
    const playerText = this.moveInfo.player === 1 ? '黑棋' : '白棋'
    ctx.fillText(`位置: (${this.moveInfo.col + 1}, ${this.moveInfo.row + 1})`, this.x + this.width / 2, this.y + 100)
    ctx.fillText(`棋子: ${playerText}`, this.x + this.width / 2, this.y + 125)
    
    // 绘制棋子预览
    this.drawStonePreview(ctx)
  }

  drawStonePreview(ctx) {
    const centerX = this.x + this.width / 2
    const centerY = this.y + 150
    const radius = 20
    
    // 绘制棋子阴影
    ctx.fillStyle = 'rgba(0, 0, 0, 0.2)'
    ctx.beginPath()
    ctx.arc(centerX + 2, centerY + 2, radius, 0, 2 * Math.PI)
    ctx.fill()
    
    // 绘制棋子
    if (this.moveInfo.player === 1) {
      // 黑棋
      const gradient = ctx.createRadialGradient(centerX - 5, centerY - 5, 0, centerX, centerY, radius)
      gradient.addColorStop(0, '#666')
      gradient.addColorStop(1, '#000')
      ctx.fillStyle = gradient
    } else {
      // 白棋
      const gradient = ctx.createRadialGradient(centerX - 5, centerY - 5, 0, centerX, centerY, radius)
      gradient.addColorStop(0, '#fff')
      gradient.addColorStop(1, '#ccc')
      ctx.fillStyle = gradient
    }
    
    ctx.beginPath()
    ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI)
    ctx.fill()
    
    // 绘制棋子边框
    ctx.strokeStyle = this.moveInfo.player === 1 ? '#000' : '#999'
    ctx.lineWidth = 1
    ctx.stroke()
  }

  drawButtons(ctx) {
    // 确认按钮
    this.drawButton(ctx, this.confirmButton, '#4CAF50', '#45a049', '确认', '#ffffff')
    
    // 取消按钮
    this.drawButton(ctx, this.cancelButton, '#f44336', '#d32f2f', '取消', '#ffffff')
  }

  drawButton(ctx, button, color, hoverColor, text, textColor) {
    // 按钮阴影
    ctx.fillStyle = 'rgba(0, 0, 0, 0.2)'
    ctx.fillRect(button.x + 2, button.y + 2, button.width, button.height)
    
    // 按钮背景渐变
    const gradient = ctx.createLinearGradient(button.x, button.y, button.x, button.y + button.height)
    gradient.addColorStop(0, color)
    gradient.addColorStop(1, hoverColor)
    ctx.fillStyle = gradient
    
    // 圆角矩形
    this.drawRoundedRect(ctx, button.x, button.y, button.width, button.height, 8)
    
    // 按钮文字
    ctx.fillStyle = textColor
    ctx.font = 'bold 16px Arial'
    ctx.textAlign = 'center'
    ctx.fillText(text, button.x + button.width / 2, button.y + button.height / 2 + 6)
  }

  handleTouch(x, y) {
    if (!this.isVisible) return false
    
    // 检查确认按钮
    if (x >= this.confirmButton.x && x <= this.confirmButton.x + this.confirmButton.width &&
        y >= this.confirmButton.y && y <= this.confirmButton.y + this.confirmButton.height) {
      return true
    }
    
    // 检查取消按钮
    if (x >= this.cancelButton.x && x <= this.cancelButton.x + this.cancelButton.width &&
        y >= this.cancelButton.y && y <= this.cancelButton.y + this.cancelButton.height) {
      this.hide()
      return true
    }
    
    return false
  }

  update() {
    // 对话框更新逻辑
  }
} 